﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>List Demo</title>
		<style type="text/css">
			body{
				margin: 0;
			}

			div{
				position: relative;
			}

			.hide{
				display: none;
			}

			#box{
				height: 50px;
				background-color: #CCCCCC;
			}

			#bar{
				position: absolute;
				left: 200px;
			}

			#bar div{
				width: 100px;
				height: 50px;
				font-size: 25px;
				line-height: 50px;
				text-align: center;/*文字居中*/
				background-color: #000000;
				color: #FFFFFF;
				cursor: pointer;/*鼠标形状为手型*/
			}

			#list{
				margin-top: 10px;
			}

			#bar-name, #list{/*css3动画 用于颜色渐变*/
				-webkit-transition-duration : 0.5s;
				-webkit-transition-delay:	0s;
				-webkit-transition-property: all;
				-webkit-transition-timing-function: linear;
			}
		</style>
		<script type="text/javascript" src="../static/js/lib/jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#bar").bind("mouseover", function(){
					$("#list").removeClass("hide");
					$("#bar-name").css({
						"background-color" : "green"
					});
				});
				$("#bar").bind("mouseout", function(){
					$("#list").addClass("hide");
					$("#bar-name").css({
						"background-color" : "#000000"
					});
				});

				$("#list").bind("mouseover", function(){
					$("#list").css({
						"background-color" : "green"
					});
				});

				$("#list").bind("mouseout", function(){
					$("#list").css({
						"background-color" : "#000000"
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="box">
			<div id="bar">
				<div id="bar-name">
					List
				</div>
				<div id="list" class="hide">
					iterm
				</div>
			</div>
		</div>
	</body>
</html>